<!--
 * @Descripttion: 
 * @version: 
 * @Author: wutao
 * @LastEditors: wutao
 * @LastEditTime: 2025-09-18 22:48:02
-->
<template>
  <div>
    <!-- <div class="top_hytitle" style="margin-top: 0;">
              <div class="letf_line"></div>
              <div class="center_text">欢迎回来</div>
              <div class="right_line"></div>
            </div> -->
    <div class="">
      <p style="margin: 15px 0; color: #9998a9">
        {{ formatTimestamp(topList.createTime) }}
        {{isShadow}}
      </p>

      <div class="top-box" :class="isShadow?'boxShadow':''">
        <p>
          {{ topList.title.split("[")[0] }}
          <span class="xiahuaxian">
            {{ "[" + topList.title.split("[")[1].split("]")[0] + "]" }}
          </span>
          {{ topList.title.replace(/.*?\]/, "") }}
        </p>
        <div
          class="top-box-list"
          v-for="(topItemcard, topItemcardIndex) in topList.card"
          :key="'list1-' + topItemcardIndex"
        >
          <p style="font-size: 18px; color: black">{{ topItemcard.sub }}</p>
          <div class="topItem-con" style="">{{ topItemcard.name }}</div>
        </div>
        <div class="top-box-btn" @click="djrbseechance">点击查看完整内容</div>
        <p class="askMe">你可以尝试这样问我</p>
        <div
          @click="sendMessageBy(topItemLink)"
          v-for="(topItemLink, topItemLinkIndex) in topList.link"
          class="top-box-list-item-link"
          :key="topItemLinkIndex"
        >
          {{ topItemLink }}
        </div>
      </div>
    </div>
  </div>
</template>
    
    <script>
import {} from "@/utils/common";
import { Toast } from "vant";
import commonFunc from "@/utils/ysjh";
export default {
  data() {
    return {};
  },
  props: {
    topList: {
      type: Object,
      default: () => {},
    },
  isShadow: {
    type: Boolean,
    default: false,
  },
  },
  watch: {},
  mounted() {},
  created() {},
  methods: {
    sendMessageBy(e) {
      this.$parent.showCollect = false;
      this.$parent.someMethod(e);
    },
    djrbseechance() {
      //   console.log(this.topList.url.param,'this.topList.url.param')
      //   console.log(this.topList.url.param.webUrl,'this.topList.url.param.webUrl')
      //  this.topList.url.param.webUrl=JSON.parse(this.topList.url.param.webUrl)
      // console.log(this.topList.url.param, "url");
      let openSource = this.topList.url.openSource;
      let openType = this.topList.url.openType;
      let functionCode = this.topList.url.functionCode;
      let param = this.topList.url.param;
      // param.webUrl="{\"startUPAdv\":\"11\",\"funId\":\"0\",\"url\":\"https://tgc.gyzq.com.cn/tgh5/view/detail/7794\"}",

      console.log(typeof this.topList.url, "typeof this.topList.url,");
      console.log(openSource, "openSource");
      console.log(openType, "openType");
      console.log(functionCode, "functionCode");
      console.log(param, "param");
      commonFunc.openService(openSource, openType, functionCode, param);
    },
    formatTimestamp(ms) {
      if (!ms) {
        return "";
      }
      const time = Number(ms);
      if (!time || isNaN(time)) return "-";
      const d = new Date(time);
      const Y = d.getFullYear();
      const M = String(d.getMonth() + 1).padStart(2, "0");
      const D = String(d.getDate()).padStart(2, "0");
      const h = String(d.getHours()).padStart(2, "0");
      const m = String(d.getMinutes()).padStart(2, "0");
      const s = String(d.getSeconds()).padStart(2, "0");
      return `${Y}-${M}-${D} ${h}:${m}:${s}`;
    },
  },
};
</script>
    
   <style lang="less" scoped>
.ztfx-span {
  opacity: 1;
  color: #666666 !important;
  font-family: PingFang SC;
  font-weight: regular;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0px;
  text-align: justified;
  background: none !important;
  font-weight: normal !important;
}
.top-box-list-item-border {
  // border-bottom: 1px solid #aecde8;
}
.topItem-con {
  margin-top: 10px;
  line-height: 25px;
  font-size: 16px;
  max-height: 180px;
  overflow: hidden;
  text-align: justify; /* 所有行两端对齐 */
  text-align-last: left; /* 最后一行也两端对齐 */
  font-weight: normal;
  text-justify: inter-character; /* 中文文本字符间距均匀分布 */
}

.top-box-list {
  position: relative; /* 必须有，伪元素才能按它定位 */

  background: linear-gradient(
    180deg,
    rgba(8, 131, 241, 0.028) 0%,
    rgba(8, 131, 241, 0.012) 100%
  );
  border: 1px solid rgba(8,131,241,0.08);
  padding-bottom: 0 !important;
}

.top-box-list::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 40px !important; /* 渐变高度 */
  background: linear-gradient(
    to bottom,
    rgba(237, 244, 253, 0.5),
    /* 顶部半 /* 顶部半透明白 */ rgba(255, 255, 255, 0.9),
    /* 中间几乎白 */ rgba(255, 255, 255, 1) /* 底部纯白 */
  );
  pointer-events: none !important;
}
.top-box-btn {
  margin-top: -1px;
  position: relative;
  z-index: 1; /* 让按钮在渐变下 */
}

.xiahuaxian {
  color: #333333;
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 16px;
  display: inline;
  background-image: linear-gradient(to bottom, transparent 60%, #c1d8fc 50%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
    